import React, { useEffect } from "react";
import { NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import StepOne from "./components/StepOne";
import StepTwo from "./components/StepTwo";
import StepInit from "./components/StepInit";
import { useClub } from "../../../context/ClubContext";
import "./style.scss";

const ClubPage = () => {
  const navigate = useNavigate();
  const { state, dispatch }: any = useClub();

  useEffect(() => {
    dispatch({ status: "yes", joinDay: 33, endDate: "2043-09-09" });
  }, []);

  return (
    <div className="container_club">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        onBack={() => {
          console.log(state,'___state');
          
          if (state?.currentStep >= 0) {
            if (state?.currentStep === 1 && state?.status === "yes") {
              dispatch({ currentStep: -1 });
              return;
            }
            dispatch({ currentStep: state?.currentStep - 1 });
          } else {
            navigate("/home");
          }
        }}
      >
        fanclub
      </NavBar>
      <div className="content_wraper">
        <div className="header_wraper common_wraper">
          <div className="that_img">
            <img src={require("../../../asset/imgs/fanclub2.jpg")} alt="" />
          </div>
          <div className="that_content">
            <h4>欢迎加入starship官方粉丝俱乐部</h4>
            <div className="item_tips">
              注册会员后可享受starship官方粉丝福利，购物累计积分，积分可兑换多重好礼。
              <br />
              后续starship运营团队也将推出一系列fanclub会员限定活动
            </div>
            <div className="item_bottom">
              <div>入会特典:全体5寸合影</div>
              <div>
                会费:<span>￥268/年</span>
              </div>
            </div>
          </div>
        </div>

        {/* 是否为会员 */}
        {state?.currentStep === -1 && (
          <StepInit state={state} dispatch={dispatch} />
        )}
        {state?.currentStep === 0 && (
          <StepOne state={state} dispatch={dispatch} />
        )}
        {state?.currentStep === 1 && (
          <StepTwo state={state} dispatch={dispatch} />
        )}
      </div>
    </div>
  );
};

export default ClubPage;
